<!-- 修改我的店铺 -->
<style scoped>
.imgDiv {
  width: 100%;
  height: 100px;
}

.showImg {
  position: absolute;
  display: block;
  width: 100px;
  height: 100px;
  border-radius: 4px;
  left: 35%;
  margin-top: 20px
}

.myFileUpload {
  position: absolute;
  display: block;
  width: 100px;
  height: 100px;
  opacity: 0;
  left: 35%;
}

</style>
<template>
  <div>
    <form class="form-inline" id="store-form" accept-charset="UTF-8">
      <input type="hidden" name="userId" v-model="userId">
      <input type="hidden" name="id" v-model="storeId">
      <input type="hidden" name="storeImage" v-model="storeImage">
      <input type="hidden" name="city" v-model="city">
      <input type="hidden" name="storeType" v-model="storeType">
      <input type="hidden" name="area" v-model="area">
      <input type="hidden" name="busiDistrict" v-model="busiDistrict">
      <div class="imgDiv">
        <img :src="oldImage" onerror='this.src="../../static/img/defaultImg.png"' class="showImg">
        <input @change='add_img' type="file" class="myFileUpload">
      </div>
      <br/>
      <group>
        <x-input title="名称" placeholder="名称" name="storeName" v-model="storeName" text-align="right" :max="16" :show-clear="false"></x-input>
        <popup-picker title="类型" :data="classList" show-name v-model="storeTypeA" :columns="1" @on-hide="storeTypeOnHide"></popup-picker>
        <popup-picker title="区域" :data="areaList" show-name v-model="areaA" :columns="1" @on-hide="areaOnHide"></popup-picker>
        <popup-picker title="商圈" :data="distinctList" show-name v-model="distinctA" :columns="1" @on-hide="distinctOnHide"></popup-picker>
        <x-input title="联系人" placeholder="联系人" name="linker" v-model="linker" text-align="right" :max="4" :show-clear="false"></x-input>
        <x-input title="电话" placeholder="电话" name="telephone" v-model="telephone" text-align="right" :max="11" :show-clear="false"></x-input>
      </group>
    </form>
    <br>
    <x-button type="primary" action-type="button" @click.native="save()">保 存</x-button>
  </div>
</template>
<script>
import { XButton, PopupPicker, Picker, Divider, XInput, Cell, CellBox, CellFormPreview, Group, Badge } from 'vux'

export default {
  components: {
    XButton,
    PopupPicker,
    Picker,
    Divider,
    XInput,
    Group,
    Cell,
    CellFormPreview,
    CellBox,
    Badge
  },
  data: function() {
    return {
      userId: window.localStorage["userId"],
      storeId: '',
      storeName: '',
      city: '杭州',
      oldImage: '',
      storeImage: '',
      classList: [],
      storeTypeA: [],
      storeType: '',
      areaList: [],
      areaA: [],
      area: '',
      distinctList: [],
      distinctA: [],
      busiDistrict: '',
      telephone: '',
      linker: ''
    }
  },
  created() {
    this.getClass()
    this.getArea()
    this.getStore()
  },
  methods: {
    getStore() {
      let _that = this;
      this.$tldAjax({
        isLayer: false,
        url: this.$domain + "/tld/admin/store/getMyStore.json",
        params: {
          userId: this.userId
        },
        successFc: (response) => {
          var data = response.data.data
          this.storeId = data.id,
            this.storeName = data.storeName,
            this.oldImage = data.image,
            this.storeType = data.storeType,
            this.storeTypeA.push(data.storeType.toString()),
            this.area = data.area,
            this.areaA.push(data.area),
            this.busiDistrict = data.busiDistrict,
            this.distinctA.push(data.busiDistrict),
            this.linker = data.linker,
            this.telephone = data.telephone
          this.getDistinct()
        }
      });
    },
    add_img(event) {
      var reader = new FileReader();
      var img1 = event.target.files[0];

      reader.readAsDataURL(img1);
      var that = this;
      reader.onloadend = function() {
        that.storeImage = reader.result
      }
    },
    getArea() {
      this.$tldAjax({
        isLayer: false,
        url: this.$domain + "/tld/pub/common/getAreaLinkageVo.json",
        params: {
          parentName: this.city
        },
        successFc: (response) => {
          this.areaList = response.data.data
        }
      });
    },
    getDistinct() {
      this.$tldAjax({
        isLayer: false,
        url: this.$domain + "/tld/pub/common/getAreaLinkageVo.json",
        params: {
          parentName: this.areaA[0]
        },
        successFc: (response) => {
          this.distinctList = response.data.data
        }
      });
    },
    getClass() {
      this.$tldAjax({
        isLayer: false,
        url: this.$domain + "/tld/pub/common/getStoreTypeLinkageVo2.json",
        params: {},
        successFc: (response) => {
          this.classList = response.data.data
        }
      });
    },
    storeTypeOnHide(type) {
      if (type) {
        this.storeType = this.storeTypeA[0]
      }
    },
    areaOnHide(type) {
      if (type) {
        this.area = this.areaA[0]
        this.getDistinct()
      }
    },
    distinctOnHide(type) {
      if (type) {
        this.busiDistrict = this.distinctA[0]
      }
    },
    save() {
      var _that = this
      $("#store-form").ajaxSubmit({
        type: 'POST',
        url: this.$domain + "/tld/admin/store/update.json",
        success: function(json) {
          _that.$store.commit('updateToast', '提交成功，正待审核');
          setTimeout(() => {
            this.$router.push({
              path: '/tourl/myStore'
            })
          }, 1500)
        }
      });
    },
  }
}

</script>
